DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for 10 React Principles, Concepts Every React developer Must know
Idukpaye alex
Idukpaye alex

Posted on

10 React Principles, Concepts Every React developer Must know

React is not easy; there are so many concepts and principles to know. Welcome to 10 React concepts, terms, and principles every React developer Must know.

1. create-react-app

This is one of the most popular ways to get started with a React application. This is quite a CLI; it is more advanced than you think but basically, this is how we create a new application:

npx create-react-app [name of your app] 
Enter fullscreen mode Exit fullscreen mode

as a bonus; if you want to add typescript, it's really simple:

npx create-react-app [name of your app] --template typescript
Enter fullscreen mode Exit fullscreen mode

As I previously said, there is way more to it. Check out their official documention.
Once you've created a new React app you wil start writing something called JSX instead of HTML.

2. JSX

This stands for Javascript and XML. It is basically a way for us to insert javascript and dynamic values into our HTML. JSX is the fundamental thing that makes React a declarative framework. Now you know what JSX is, you are ready to start creating components.

3. Class-based Components

These are the old kind of components (introduced in React 16.8); they use classes to define components.

class Clock extends Component{
// Application Code //
}
export default Clock
Enter fullscreen mode Exit fullscreen mode

The problem with the class-based components is that they are deprecated and very hard to learn for beginners. This brings us to another type of component.

4. Functional Component

These components are defined by a simple function and are more modern to write (introduced in React 17).

function clock(){
// application data //
}
export default Clock
Enter fullscreen mode Exit fullscreen mode

These components are easier and cleaner to write, but there is one just big limitation. Functional components by themselves can not do most of the important things class-based components can do such as store state etc. This brings us to another concept.

5. Hooks

Because functional components can't do most of the things a class-based component can do such as hold data and etc. Hooks are a way to extend the functionality of a functional component. The most important one is -- which is yet another concept.

6. useState hook

This is undoubtedly the most important React hook, In fact, functional components are useless without them. Its function is to create state(which is reactive data) for functional components.

const [sampleState,setSampleState] = useState('I am a sample state')
Enter fullscreen mode Exit fullscreen mode

The usestate hook by itself is not totally complete. So it is frequently used with another hook.

7. useEffect hook

That hook is no other than the useEffect hook. This hook is very confusing, but it's basically used to run code on a specific condition.

useEffect(() =>{
// some logic
},[condition])

Enter fullscreen mode Exit fullscreen mode

8. props

Now we've looked at how components store internal data(useState); let's look at how components share data with each other; Well, they do so using props. Let's briefly look at how they work.

function body(){
<nav color='red' /> // the color is the prop
}
// now let's receive that data inside the nav component
function nav(props){ // destructing is possible but let's keep it simple
const color = props.color
}
Enter fullscreen mode Exit fullscreen mode

9. Higher-Order-Component

A higher-order component is an advanced technique in React that is used for supercharging and reusing components. it takes a component as its argument and returns something else

const EnhancedComponent = higherOrderComponent(WrappedComponent);
Enter fullscreen mode Exit fullscreen mode

10. key

To render a list of data effectively; we assign a unique ID to each item in the list. That is called a key.

Conclusion

I really hope you enjoyed the article and found it useful if so, please leave a reaction and comment down your own unique React Concept

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!