I am used to make front-end code through react and pretty familiar with using react tools(usually cra) right now.
But now i want to know basic react working process.
I hope i can understand the code from node_modules/react or react-dom or whatever.
So i pulled the reactjs(facebook) source code in github.
And i am reading react.development.js file right now.
But i can not understand lots of things.
There are so many materials for how to use react.
But i can not find very well why is react works that way.
I already know about HMR, HOC, Virtual-Dom etc. that Main big concepts of react.
And even i can make Custom hooks and build up my project with presentational-container pattern and adapt the atomic pattern and i made my own design pattern. So i think i am pretty good to make application right now.
But I am just really eager to know about open source code to read.
Are there someone does code review for such Module files directly?
Annotaion is not enough for understand full of code.
Or if i study javascript more then i can understand?
Thanks for reading.
Related
Background story (you can skip to question)
As a begginer (full-stack, but about 8 years behind) I'm struggling with deciding what to learn.
Vue and Nuxt.js are great to understand, but as a designer, I really miss the option to use Framer Motion. Also the fact that I can't use Tailwind UI (Headless UI) with Nuxt (as of right now) since Nuxt still uses Vue 2.
As I worked on my app I felt that I would have much better online support with React, specifically with Next.js to make the learning curve easier. The overall community is bigger and there are much more tutorials. But I discovered that Nuxt used some things that Next is missing (probably?) — like auto registering components.
The question:
I really miss not caring about writing an import path to each component I use.
Nuxt.js did this automatically. Is there something similar in Nuxt.js?
I could also nest them in subfolders like this:
/components/Point/Section/Table/Row.vue
and put them in code like: <PointSectionTableRow />
Thanks Estus for the comment that IDE's handle autoimport. I discovered VS Code Auto import plugin that can autoimport components, icons etc with just a tooltip click. Very handy!
The new redesign of Reddit features a really slick WYSIWYG/Markdown editor. Screenshots:
Once clicking on "Switch to markdown":
Is this an open-source library available for implementation, or is this entirely an internal Reddit-only solution?
On another note, I've been comparing a whole bunch of Markdown editors, and can't seem to find anything that works really well with React. SimpleMDE isn't bad, but its last commit was two and a half years ago, and it has no official React bindings either.
What would be my best alternative for direct implementation into a React app?
I'm relatively comfortable with laravel, but know very very little about javascript and npm in general... just to set some context.
I am building an app where I now require a "library of forms" to be filled out. So I'm thinking that I should leverage the expertise of others, and take advantage of what appears to be quite an impressive bit of work, in the form of SurveyJS. https://surveyjs.io/Documentation/Library
I'm probably making a total dog's breakfast of these different concepts, so bear with me please.
So whilst I've got the npm thing running smoothly, I'm not sure I understand the whole webpack compilation thing (yet).
Can you explain to me...
My plan is to have a number of "surveys" defined suitably for the surveyjs "engine". The logic I'm seeing is laravel app eventually pulls "a survey" and passes it to a view to be "executed".
The surveyJs librarys will use that model amd provide the results back to the laravel app - I'll pickup the results in a controller and deal with them.
If this is a suitable approach, then what are these choices about? https://github.com/surveyjs
If I take https://github.com/surveyjs/surveyjs-php (because it's the closest thing I can find to php/laravel then first step is to install docker. I'm a little confused about why I would be installing more "infrastructure" when I'm actually looking for the libraries necessary.
I don't understand why what I'm thinking as a very clever bit of javascript seems to want it's own "infrastructure" - docker / webpacks / etc. And then there's still the whole laravel mix thing.
Thanks in advance.
The main repo has dists for several different js frameworks, the editor repo is just that - only the core surveyjs lib - and the other repos are sample apps, a base project template and extras you may not need.
JavaScript has become a whole ecosystem in and of itself: building with rollup, webpack, parcel, brunch, gulp? For which framework, if any, Angular, react, vue, jquery, vanilla or a little bit of a and a little of b? What are you targeting, browsers, node, both, making an electron app? Using es6? Newer? Typescript?
Basically you're seeing surveyjs want infrastructure because they have answered the above questions. Welcome to javascript :)
I think it has something to do with using webpack directly and therefore gives more flexibility. But I'm not completely sure if someone can explain what "ejecting" means. Also what are the ramifications of ejecting a create react app? Is it bad to do this, or?
To bootstrap a react project it will require for you to know about things like Webpack or Babel which might be a sticking point for people who do not want to learn about these.
create-react-app provides a fully configured environment with reasonable defaults (and possible to extend). Most infrastructure-related work is hidden from you, and whenever there are changes in one of the dependent packages this is taken care of for you -- it will only be required to update react-scripts.
I highly recommend this presentation by one of CRA authors it will give you a better idea of the project.
Now eject means that all of the configuration will be exposed to you. You will see every package which runs your project. Now you are responsible for maintaining all of that configuration.
This is not necessarily a bad thing; you are then left with more code to maintain, but you get full control in return.
I've been searching for answers to this for a couple of weeks now, and I've read through everything related I could find (on SO, in React's docs, in the source for related libraries like react-codemirror, etc.), and can't find an answer I can understand. I'm kind of weak on React, and that's probably where I'm falling down.
I'm working on a project built in React (called Pharaoh, a browser- and desktop-editor meant for the classroom) that uses Firepad (and so, uses Firebase and CodeMirror, which I love). I've used all of the above technologies a bit, including writing a desktop Markdown editor thing using CodeMirror and a few demo/practice apps using Firebase. My issue here is almost definitely one of just not understanding React all that well.
What I'm trying to do is get the ability to save files out of our Firepad/CodeMirror instance (to the desktop). I know generally how to use FileReader and the HTML5 Filesystem API, and this could even be done potentially with node-fs, since my target here is our desktop app (which runs on NW.js).
CodeMirror has some really useful methods like editorName.codeMirror.doc.getValue() which would work perfectly; Firepad has the even simpler editorName.firepad.getText() (and .setText() which I'd also end up using to load in files from the filesystem). I know how these work, and can see how I'd take what they return and save it out, that's no problem. My problem is that I can't actually access those methods. This is probably some silly thing I should just know about accessing methods from third-party libraries or from components in general, but I'm kind of stumped on it. A tool I frequently use at work, Codeshare.io, which I believe is built in React and uses Firepad, has those methods exposed, so I'm about to dig into their source (yay for cURL) and see if I can find any answers, but anything quicker would be really super helpful.
Thanks muchly!
Note: I guess I need to earn more SO reputation; removed/altered a bunch of links before posting.
Use these npm packages - brace, react-ace, firebase, firepad.
Since firepad needs aceto be present globally, assign brace to global var
like(not the best way, but works) before importing firepad
import brace from 'brace';
global.ace = brace;
global.ace.require = global.ace.acequire;
import Firepad from 'firepad';
Use ref to get instance of ReactAce and initialize it in componentDidMount using:
new Firepad.fromACE(this.firepadRef, this.aceInstance.editor, options);
Similarly for CodeMirror editor.
Hoping, this would be of some help.