I'm learning react recently. I don't understand why any online tutorial said that react has View Layer only. But I think react has Controller Layer only.
Can any one help me understanding how react has View Layer?
If we think about a web app that utilizes React as utilizing a Model View Controller architecture then your tutorial makes sense. React acts as your view, but interfaces with your server. Your server acts as your controller, but interfaces with your database. Your database acts as your model.
A React application can be written completely in JavaScript files. In this case you would utilize JSX for your template structure and JSS for your styles.
React also gives you the ability to manipulate your DOM using JavaScript. It simplifies this by giving you lifecycle methods to work with, or hooks. Behind the scenes React uses a virtual DOM and a process called reconciliation to make updates to only the components that require changes based on the JavaScript logic you implement. This makes React applications very efficient, and gives you a tremendous amount of control over your UI.
This is a very broad answer, but I think you need to spend some more time looking through the docs and watching more tutorials to understand the framework and how it fits into a web app's stack. Hopefully this helps point you in the right direction. It's a fantastic framework, so stick with it!
Related
I would like to know if it is possible to create a React project containing Redux library and then export it in another project? Until now, I only create components that display data. So I never wonder if it is possible.
The goal is to develop a little chatbot that communicates with an API. Then, this project will be used in several React projects.
Is it possible to do this? If yes, is it a good practice?
I have searched on the web and on Stack Overflowbut I didn't find any answer.
Sorry if the question has already been asked.
Thanks.
It is possible. A React component is a JavaScript function or a class. It can contain any JavaScript code. So a companent that is exported to other projects can manage its state using Redux.
Redux makes sense when the state handling is complex. Your component seems simple since all it does send data to an API and show received data. If you think it is complicated and that it would be difficult to implement it using pure React alone, you can use Redux.
I'm fairly new to react; just learning it. From what I understand react gives you ability to render data more dynamically. But couldn't this be achieved using flask rest api endpoints? Kind of making AJAX calls and rendering it's response dynamically?
What's the difference?
I'm currently trying to develop a full stack application. Trying to choose what I should use for frontend, typically on a normal day I tend to use pure HTML/CS/JS to accomplish most of my front-end task without having to use JS libraries such as react to render data dynamically, I want to improve my ways around handling front-end stuff hence wanted to learn more about react and how it can benefit me; before actually diving in it.
What can help is; if someone can lay it out for me; describing work scenario using reactjs and how I can be benefiting from using the js library.
Thanks.
In my opinion, React is all about how effectively you can render your dom elements.
Rendering DOM (Painting your webpage with your HTML elements) is considered to be one of the costliest operation. And if you consider using other libraries( apart from react), there is a chance that your HTML will be rendered even if it doesnt change.
Here comes the power of React. React uses the concept of Virtual DOM which helps in rendering HTML to browser only when there is a change. For example, if you have a list of items being displayed, and if one list item changed because of some action, React will trigger a change to render only that element(of course we write very minimal code for this).
So if you use React as your front end library, you can easily benefit fast rendering of HTML and stopping unnecessary rendering of your DOM
Basically I am start learning Rxjs and I am a little bit confused between React and Rxjs. I was supposing that Reactjs and Rxjs is same.
Questions:
If Reactjs and Rxjs is the same then why are we using Reactjs over Rxjs or vise versa?
If Reactjs and Rxjs not same, then please briefly differentiate both the languages.
This is really different, React is view library and Rxjs is reactive programming library for javascript. You can use Rxjs inside react view but in reactjs, people usually use a library like Redux, flux, mobx or relayjs (if they use graphql) for data flow.
ReactJs is a view library UI.
ReactiveX or rxjs is a concept, methods or patterns for asychronous programming
RxJS is a library that allows us to easily create and manipulate streams of events and data. This makes developing complex but readable asynchronous code much easier.
Creating large asynchronous applications is not the easiest thing to do. We have all witnessed the issues callback hell can cause. Due to this growing concern, people have taken it upon themselves to improve the asynchronous JavaScript landscape. We have all heard of promises, generators, and async/await. There is another solution, and it is called RxJS.
Reference Link
ReactJS
In the simple and popular term, React is the V (View) in MVC (Model/View/Controller).
React is a JavaScript library (from Facebook) that is used to render views (for example, HTML pages) dynamically based on some state, which is often in the form of data. React then updates the generated views whenever the original state changes. React is a small but powerful library, with the power being more in the concepts than in the implementation.
Reference Link
React is a javascript library for building user interfaces and makes it painless to create interactive UIs.
RxJS is a javascript library for reactive programming using Observables and makes it painless to compose asynchronous or callback-based code.
Both these javascript libraries are not comparable to each other since they serve different purposes, but together they can create better single-page applications.
Reference MV* Architecture using React js
I understand that React is an View Engine and it still requires many other libraries like Redux..etc.
Is there a list of libraries to be used along with React to build a complete ecosystem like Angular ?
The React/JS ecosystem has become so rich, you can't really decide of a set of libraries to use by default in every projects.
It really depends on your needs.
Many people choose to generally go with react-router for the client-side routing, react-dom to interact with the DOM, redux for the state management, and react-redux to connect your components to the redux state.
You might find better answers by looking at the code of these react boilerplates, some of them explain there choices: http://andrewhfarmer.com/starter-project/
One of the key decisions in choosing React over Angular for us was that React is a technology, not a framework.
The ability to mix librairies to your needs is the big plus; there is no best list. As a quick example, redux makes tons of sense for us for the webapps, however it does not for the react-native mobile app where it may not blend well with the Navigator or may be overkill...
I don't understand why we need Flux with React as React itself let's us maintain the state of the application. Every component has an initial state and the state can be changed by user actions or any other asynchronous JavaScript.
Why is React called as only a view library when it can let's us define state of the application and also update view whenever state changes. This is not what a view does....its what complete MVC does right?
For example: here is an Todo app build only with React and here is an Todo app build with Flux and React.
If we can build the Todo app with React only then why do we need Flux?
In theory you don't need flux.
In small applications you don't need flux for sure.
But what if your application consist of hundreds components? And one of your component is form. User populate this form and you send its content to server. And get response from server with new data.
And assume that this response data and data from form are necessary to other components.
Without flux:
You can move your data to root component and then distribute it down to all components. But if you need to distribute data from many other components too? This makes your application very complex.
with flux:
You move your data to stores, and all components which are interested about this data, can get it from there. You have better control on your application and source data.
I prefer redux (only one store and one source of truth)
edit:
Why is React called as a view library even if it can handle application state?
MVC is a software architectural pattern. It divides a given software application into three interconnected parts (models, views, controllers).
If we think about react and MVC it fit as View. But this is nothing wrong. It doesn't mean that you can use it only for views. It allows you to create normal applications.
But in other hand you can use it as view for other frameworks (for example you can use it with angular).
In other words it is very flexible library for many uses.
You don't NEED Flux the same you don't need MVC. They are both architectures and you can of course build something without using either.
Would you build a non-MVC app in 2016? Probably not, that doesn't mean that people didn't do it in the past.
Flux is awesome! But as most things in the tech industry is not always the right decision, things vary in a project requirement basis.
Probably the biggest selling point of Flux is that it tries to enforce the data flow in one direction, this means that you know for sure where the data is coming from. In a non-flux app the data for a component could be an own property, a property passed down the component tree, a local state variable, a state variable result of calling an API.
With Flux: "where does the data come from?". Answer: from the stores. Redux takes this further and only uses a single store.
Flux has been criticized because you need a lot of boilerplate code but again is a matter of tradeoffs.
At the end is always your call depending on your project needs.