Learn React Concepts
Tags: javascript, react, beginners, tutorial
Published: 2022-06-14 16:35:14

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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4gvygdodupr7qgms4wn.png).

The command above pulls certain folders and code from react
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dc9ob5q9gzm18zmineaf.PNG)
 
---

Change directory and start your react app by running:
`cd react-tut && npm start`

You should see this lovely page on opened on port `3000`in your browser.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6ri867byeb1q5kx3ic9.png)
 
---

#### 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8k5wk5d1zwovq44jy8ir.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b37ufx3llix9jxk7urox.png)
 

After removing the above file and clean up. We have:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpa6r1wiy2b1isljaii3.png)

Visit your browser to view the changes made into our app
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgdkhkjjajkhmqlz73gu.PNG)


---

 
### 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:_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3it8u357v04pi8z6x8n4.png)

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. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsjxmj9kegqvgh02n5zu.PNG)

 
---

To quickly write 4 line of emojis that are reacting on my browser, all i need do is to duplicate the `Emoji` component.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/goth6j33e5k6jfuze626.png)

Head over to your browser.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmuhhmxnze762tpgtkug.png)


---

### 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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15tp8629at86sumz0m0t.png)
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yn0yuxibkfzojefmndw2.PNG)

Everything should still works the same, only that we have a more cleaner code base. 
  

---

### Props
Let's create a `Greeting.js` component
```javascript
export const Greeting = () => {
  return (
    <div>
      <h1>Hello James</h1>
    </div>
  );
};

```

And import inside our `App.js` comoponent
```javascript
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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6u5lsx6z5s63sl6ynf9.png)

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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgymo7alpywna1jgtlse.png)
 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhv66un8t5jv9v59rnm4.png)

Our result should look like:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idtng17hqvy6tsdvfwm7.png)


 
---

### State Management and Event Handling
_A state is a variable that is maintained inside a component_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qpme6mevnc37n0uhxj2.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12qdmx5jdewha3a4cf1u.png)  

#### 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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spunrj9vfutb3k4mm5ht.png)
 
##### After
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fenff68abgdu5bgz8cnv.png)


Before we move on, let's refactor this code a bit.
`Message.js`

```javascript
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 <mark>if/else</mark> or <mark>switch</mark> cases.
Let create a file and call it `Gender.js`. We will write a logic
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cva811qrsc4xpv2moirh.png)
 
> As long as `isMale = true;` the result render to will be:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l48u45kpvbgf59ez7su2.png)

If `isMale = false;`, the result will be:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xm8wryuib2f7q51p659.png)


---

### Rendering List using `map`.
Say we want to output a list of animals from an array.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n29xu6baekblcedo4kg1.png)

In `App.js`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k63pejjmyl69pal6ewqk.png)

Result
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0g0jcplze6wtmycmjn2m.png)

---

### 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

---

### Resources
[ReactJs](https://reactjs.org/docs/create-a-new-react-app.html)
[React 18](https://www.youtube.com/watch?v=jLS0TkAHvRg)