We’re ready for your Lightning Talks submissions – React Day Berlin – Medium

We're ready for your 🌩 Lightning Talks submissions!  #ReactJS #ReactDayBerlin

  • We’re ready for your Lightning Talks submissionsReact Day Berlin forecast: 🌩 A chance of snow and thunderous applauseReact developers sometimes have to deal with tough situations, but making small talk with your fellow geeks has never been one of them.
  • Do you have a project you’d like to discuss with / pitch to an audience but a full talk would be too much for now?
  • React Day Berlin is ready for you, anyway.📩 Submit your Lightning TalkAs always, all winning speakers will get to attend React Day Berlin for free.
  • We’ll pick 4 of all proposals that’ll make the most sense in our lineup.Local developers and React newbies are especially welcome to submit.
  • In case you need help figuring out and fine-tuning your talk, we’re here for you.Each talk is limited to 5–7 minutes without QA.All winning proposals will be published on our website and here on Medium and also promoted through our social channels.Talks are subject to the Berlin Code of Conduct….

React developers sometimes have to deal with tough situations, but making small talk with your fellow geeks has never been one of them. Well, there’s no need to discuss the weather when the scene is…
Continue reading “We’re ready for your Lightning Talks submissions – React Day Berlin – Medium”

React.js Efficient Server Rendering – Hacker Noon

#ReactJS #Javascript RT @ReactAmsterdam: Make #ReactJS Server Rendering Efficient:

  • React.js Efficient Server RenderingFor about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more simplicity to frontend.But in some cases we need SEO with dynamic JSX content or we need more performance in load time for a frontend pages.
  • And for that cases Facebook developers made React.js in that way so it can be rendered on Server Side too, using Node.js basic functionality.So the flow is almost similar to this oneClient sending request to get some JSX template pageNode.js server getting main file containing JSX codeRendering it to plain HTML codeSending HTML response to clientUsing HTML markup, then client loading also React.js client side code for adding dynamic logic to rendered HTMLThis is helping to display HTML content faster than React will render it, and it is helping to give some content to Search Engine bots or website crawlers.But What If You Don’t Have Node.JS backend?This is the real questing that was standing for me when I’ve started working on large Python Django project.
  • I decided to do React.js as a frontend, but they hat a lot of Python stuff on a backend, I couldn’t rewrite all code just for server side rendering.
  • I think we really don’t need!And I got an idea to build standalone Node.js Server only for React.js JSX template rendering and nothing else, so I can make a proxy request to that server and it will render JSX content for me and will response pure HTML back to Python Django Template.
  • What is that?So using basic principle of proxy requests I just made very simple code for Pythonimport requestsimport jsonPROXY_RENDER_ADDRESS = ‘http://localhost:3000/’def get_html(filename, props): try: props_str = json.dumps(props) r = + filename , data=props_str , headers={‘Content-Type’: ‘application/json’}) if r.status_code == 200: return r.text, props_str except Exception as e: print(e) return False, FalseWhich is basically making POST Request to proxy rendering service and by passing global state as a JSON, getting back the HTML code rendered by Node.js server.So the main advantages that I gotNo need to integrate Node.js in backend side, or use crappy JS engines in Python, which are eating a lot of memoryAbility to keep JSX template cache, which give huge load time improvementsScale backend services without scaling base rendering service, so you can have multiple servers with single cached rendering service and get better performanceHuge flexibility in writing code.

For about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more…
Continue reading “React.js Efficient Server Rendering – Hacker Noon”

Working with Git Submodules

  • The ‘url’ gives the repository URL link for the respective submodules using which Git clones the project.
  • The two sample submodules are ‘SampleModule1’ with URL and ‘SampleModule2’ with URL start by initializing a Git repository for SampleProject, to do this we use the command in the terminal:

    git init

    2)We’ll create a SampleFile for initial commit using any text editor and commit the file using the command:

    git add.

  • We have the details for the submodule above, using that we’ll integrate those repositories into our project as one of the subdirectories:

    git submodule add git submodule add 3.

  • a)Now both the submodules are added to your project, if we check the repository tracking status in SampleProject directory using ‘git status’, we’ll get the following output:

    git status

    Here three files are created ‘.

  • git/modules/

    “Commands Quoted From try removing the SubModule1Local from our project:

    git submodule deinit SubModule1Local

    My project folder now looks like,

    -Working in Submodule: You can directly work in the repository of the submodule by changing the current working directory to the subdirectory of the submodule.

Working with Git is great. The modern version control system that boosts a distributed architecture has much to offer when compared to many of
Continue reading “Working with Git Submodules”

Why ReactJs? – (┛◉Д◉)┛彡┻━┻ – Medium

Why ReactJs?  #react #reactjs

  • Instead of writing an html line for news, messenger and marketplace you can see that they are basically the same, the only thing that changes is the icon and the information so we can make a component called nav that receives information and an icon.
  • Let code this component:First, we are going to make its container, with an JSON object with the information we want to be see.Now we are going to do the component:Using this practice, we are able to create a web app by just iterating a JSON object, that will pass the information to the containers.Another cool thing of react is its community.
  • There is a lot of components already made so you can just add them to your project as easily as adding a library to your normal html code.
  • Some github repositories that have a lot of components are:· lot of people have a problem with HTML being mixed with JS because they feel like breaking separation of concerns but in reality, it is more of a separation of technologies rather than concerns.
  • It helps your application to be more efficient because you don’t need to repeat code, there is an amazing community behind it, it has some really awesome modules that helps you to manage the unidirectional data flow, as well as managing which component must be render and if it is a component that is visible in all of the pages such as a menu to just render it once instead of every time you change of page.Tldr: react is awesome.

React is a new JavaScript library developed by Facebook released in 2013, but it wasn’t until 2017 that react was stable. React is like the best of both worlds, it has the functionality of JavaScript…
Continue reading “Why ReactJs? – (┛◉Д◉)┛彡┻━┻ – Medium”

React.js Efficient Server Rendering – Hacker Noon

“React.JS Efficient Server Rendering” by @tigranbs  #NodeJS #reactjs #javascript #python

  • React.js Efficient Server RenderingFor about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more simplicity to frontend.But in some cases we need SEO with dynamic JSX content or we need more performance in load time for a frontend pages.
  • And for that cases Facebook developers made React.js in that way so it can be rendered on Server Side too, using Node.js basic functionality.So the flow is almost similar to this oneClient sending request to get some JSX template pageNode.js server getting main file containing JSX codeRendering it to plain HTML codeSending HTML response to clientUsing HTML markup, then client loading also React.js client side code for adding dynamic logic to rendered HTMLThis is helping to display HTML content faster than React will render it, and it is helping to give some content to Search Engine bots or website crawlers.But What If You Don’t Have Node.JS backend?This is the real questing that was standing for me when I’ve started working on large Python Django project.
  • I decided to do React.js as a frontend, but they hat a lot of Python stuff on a backend, I couldn’t rewrite all code just for server side rendering.
  • I think we really don’t need!And I got an idea to build standalone Node.js Server only for React.js JSX template rendering and nothing else, so I can make a proxy request to that server and it will render JSX content for me and will response pure HTML back to Python Django Template.
  • What is that?So using basic principle of proxy requests I just made very simple code for Pythonimport requestsimport jsonPROXY_RENDER_ADDRESS = ‘http://localhost:3000/’def get_html(filename, props): try: props_str = json.dumps(props) r = + filename , data=props_str , headers={‘Content-Type’: ‘application/json’}) if r.status_code == 200: return r.text, props_str except Exception as e: print(e) return False, FalseWhich is basically making POST Request to proxy rendering service and by passing global state as a JSON, getting back the HTML code rendered by Node.js server.So the main advantages that I gotNo need to integrate Node.js in backend side, or use crappy JS engines in Python, which are eating a lot of memoryAbility to keep JSX template cache, which give huge load time improvementsScale backend services without scaling base rendering service, so you can have multiple servers with single cached rendering service and get better performanceHuge flexibility in writing code.

For about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more…
Continue reading “React.js Efficient Server Rendering – Hacker Noon”

Stop Managing CSS – Charlie Hulcher – Medium

Stop Managing CSS  #cssinjs #react #styledcomponents #css #http2 #reactjs

  • Stop Managing CSSA response to Managing CSS JS in a HTTP/2 WorldThis article on getting great performance out of HTTP/2 would have excited me hugely before.
  • Sane structure and tooling around SCSS that allows for the best loading benefits with HTTP/2 is definitely the future when your styles are separate from everything else.I believed in separating styles, behavior, and structure for a long time.
  • Keep style alongside behavior and structure.Coming from that context, reading about the right way to manage CSS felt like watching exciting evolution for a dated paradigm.
  • A cleaner design for a horse harness is a beautiful thing but doesn’t beat the engine.Solving the problem of chunked CSS delivery in order to get performance benefits from HTTP/2 sounds to me like reinventing the wheel from what you’re probably already doing.
  • Why rebuild that process in parallel for CSS?The core problem comes down to managing CSS inclusion/exclusion from the project through a human process.

This article on getting great performance out of HTTP/2 would have excited me hugely before. Sane structure and tooling around SCSS that allows for the best loading benefits with HTTP/2 is definitely…
Continue reading “Stop Managing CSS – Charlie Hulcher – Medium”

Awesome Expo Apps for React Native – BlechaTech – Medium

Awesome Expo Apps for React Native  #reactnative #reactjs #reactjs

  • Awesome Expo Apps for React NativeI’ve been working through creating an app that I need for my kids baseball activities during the past month and I’ve been really impressed with the toolset that the Expo team has put together.
  • It’s much nicer for me if this doesn’t have to go through the app store for development and testing purposes.JavaScript tool set — I’ve decided to use JavaScript as my primary language for the next bit unless there’s a specific reason not to use it.React — I’m spending most of my front end development in react these days, and I’m very happy about it.
  • The mental model is fairly straightforward and translates from web to mobile gives you an expo app by default.
  • Check out the expo explanation video:I decided I wanted to keep track of the expo apps I’m seeing in publish and the added bonus that they’re typically linked with a github account.
  • The first two are (authors and notes are cited in the github repo, link below):Seattle JS Conference AppGraphQL NYCI’ll keep adding to the list as I find new expo apps and PRs are welcome!Photo Credits:

I’ve been working through creating an app that I need for my kids baseball activities during the past month and I’ve been really impressed with the toolset that the Expo team has put together. Given…
Continue reading “Awesome Expo Apps for React Native – BlechaTech – Medium”