Hello and welcome to this tutorial on how to get started with React. React is a JavaScript library used to create user interfaces. It enables us to create a modular and scalable app.
🎯 Prerequisite
NodeJs installed on your pc
Javascript knowledge
Let's get right into it.
Setup
Run npx create-react-app [project name] to setup your react project
.
The command above pulls certain folders and code from react
Change directory and start your react app by running:
cd react-tut && npm start
You should see this lovely page on opened on port 3000in your browser.
First main app
Now, let's write our first app. Let me clean up my src folder to rid of files that are not needed.
After removing the above file and clean up. We have:
Visit your browser to view the changes made into our app
Components
Let's see how we can modularize or compose our app using functions. The simplest way to define a component is to write a JavaScript function:
Two important things to note here:
1. We created the Emojis component
2. We are rendering the Emojis component in the App component.
Everything should still remain the same in our browser.
To quickly write 4 line of emojis that are reacting on my browser, all i need do is to duplicate the Emoji component.
Head over to your browser.
Exporting and Importing modules
Let's separate our concerns i.e we move the Emoji component into another file entirely using the import and export functions
Everything should still works the same, only that we have a more cleaner code base.
Props
Let's create a Greeting.js component
export const Greeting = () => {
return (
<div>
<h1>Hello James</h1>
</div>
);
};
And import inside our App.js comoponent
import './App.css';
import { Emojis } from './components/Emojis';
import { Greeting } from './components/Greeting';
function App() {
return (
<div className="App">
<Emojis />
<Greeting />
</div>
);
}
export default App;
We should have something like this
So what if we want to output the same greetings to different people. We can use props to achieve that. Let's refactor our code to use the props passed in as a parameter
Our result should look like:
State Management and Event Handling
A state is a variable that is maintained inside a component
Explanation
1. We use the useState hook to create a state variable called message.
2. We set the initial value of the message to 'Is react the best framework?'.
3. We create a button that when clicked, sets the message to 'yes of course!'.
4. We return a div with a h1 tag that contains the message.
Let us ask, by clicking the button to ask if react is the best framework.
Before
After
Before we move on, let's refactor this code a bit.
Message.js
import { useState } from 'react';
export const Message = () => {
const [message, setMessage] = useState('Is react the best framework?');
const handleMessage = () => {
setMessage('yes of course!');
};
return (
<div>
<h1>{message}</h1>
<button onClick={handleMessage}>Ask</button>
</div>
);
};
In the code above, we separated the handleMessage as a function on its own.
Conditional Rendering
This is a way of writing conditions in react just like our normal if/else or switch cases.
Let create a file and call it Gender.js. We will write a logic
As long as
isMale = true;the result render to will be:
If isMale = false;, the result will be:
Rendering List using map.
Say we want to output a list of animals from an array.
In App.js
Result
Conclusion
I hope this post was helpful. I hope to continue with topics and concepts like Styling [CSS Stylesheets, Inline styles,CSS modules], Form Submission, Data fetching using Axios or the in-built fetch, Search Queries and so on.
Thanks for reading
Top comments (0)