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]
as a bonus; if you want to add typescript, it's really simple:
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.
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
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
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')
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])
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
}
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);
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)