DEV Community

Cover image for Learn React Concepts
Abayomi Ogunnusi
Abayomi Ogunnusi

Posted on

Learn React Concepts

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.

The command above pulls certain folders and code from react
Image description


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.
Image description


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
Image description

After removing the above file and clean up. We have:
Image description

Visit your browser to view the changes made into our app
Image description


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

Two important things to note here:

1. We created the Emojis component
2. We are rendering the Emojis component in the App component.
Enter fullscreen mode Exit fullscreen mode

Everything should still remain the same in our browser.
Image description


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

Head over to your browser.
Image description


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
Image description

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>
  );
};

Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

We should have something like this
Image description

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

Image description

Our result should look like:
Image description


State Management and Event Handling

A state is a variable that is maintained inside a component
Image description
Image description

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. 
Enter fullscreen mode Exit fullscreen mode

Let us ask, by clicking the button to ask if react is the best framework.

Before

Image description

After

Image description

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>
  );
};

Enter fullscreen mode Exit fullscreen mode

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
Image description

As long as isMale = true; the result render to will be:

Image description

If isMale = false;, the result will be:
Image description


Rendering List using map.

Say we want to output a list of animals from an array.

Image description

In App.js
Image description

Result
Image description


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
React 18

Discussion (0)