10 React Principles, Concepts Every React developer Must know
Tags: javascript, react, beginners, webdev
Published: 2022-09-10 08:55:36

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:
```bash
npx create-react-app [name of your app] 
```
as a bonus; if you want to add typescript, it's really simple:
```bash
npx create-react-app [name of your app] --template typescript
```
As I previously said, there is way more to it. Check out their official [documention](https://create-react-app.dev/).
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. 

```javascript
class Clock extends Component{
// Application Code //
}
export default Clock
```
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).

```javascript
function clock(){
// application data //
}
export default Clock
```
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. 

```javascript
const [sampleState,setSampleState] = useState('I am a sample state')
```
  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.

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

``` 


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

```javascript
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
}
```
#### 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

```javascript
const EnhancedComponent = higherOrderComponent(WrappedComponent);
```

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